<template>
	<view class="privilege">
		<!-- <cu-custom bgColor="bg-gradual-pink" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">列表</block>
		</cu-custom> -->
		<view class="vipbanner" v-if="isShow">
			<view class="text-black text-bold title">{{payAmount}}元VIP永久取图群</view>
			<view class="text-black sctitle">成为VIP会员，即可显示完整二维码</view>
			<view class="cu-card dynamic">
				<view class="cu-item shadow">
					<view class="cu-list menu-avatar">
						<view class="cu-item">
							<view class="cu-avatar radius lg" style="background-image:url(../../static/qun1.jpg);"></view>
							<view class="content flex-sub">
								<view class="text-black txt">{{payAmount}}元VIP永久取图群0</view>
							</view>
						</view>
					</view>
					<view class="grid flex-sub padding-lr">
						<view class="bg-img">
							<image src="../../static/coverbg.jpg"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="carbox">
			<view v-for="(item,index) in tableData">
				<view class="cu-bar bg-white solid-bottom">
					<view class="action">
						</text>特权<text class="vnum">{{index+1}}.</text>{{item.title}}
					</view>
				</view>
				<view class="cu-card dynamic">
					<view class="cu-item shadow">
						<view class="text-content">
							{{item.details}}
						</view>
						<view class="image">
							<image :src="item.picUrl"
							 mode="widthFix"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="cu-card article">
				<view class="cu-item shadow">
					<view class="content">
						<image :src="numberobj.gzhPic"
						 mode="aspectFill" @tap="showModal" data-target="Image"></image>
						<view class="desc">
							<view class="text-content"> 
								<view class="title">
									微信公众号：{{numberobj.gzh}}
								</view>
								<view class="smalltitle">
									点击二维码可放大
								</view>
							</view>
							<view class="info">
								打开微信扫一扫二维码关注公众号
							</view>
						</view>
					</view>
					<view class="title"><view class="text-cut"></view></view>
				</view>
			</view>
		</view>
		<view class="padding">
			<button class="cu-btn block bg-blue margin-tb-sm lg" type="" @click="aLink">立即支付{{payAmount}}元 成为VIP</button>
		</view>
		<view class="cu-modal" :class="modalName=='Image'?'show':''" @tap="hideModal">
			<view class="cu-dialog">
				<view class="bg-img" style="background-image: url('../../static/code.jpg');height:380px;">
					<view class="cu-bar justify-end text-white">
						<!-- <view class="action" @tap="hideModal">
							<text class="cuIcon-close "></text> 
						</view>-->
					</view>
				</view>
				<view class="cu-bar">
					<view class="action margin-0 flex-sub  solid-left" @tap="hideModal">我知道了</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { vipListApi,userNumCountApi } from '@/common/requestjs/goods_api.js'
//#ifdef H5
import $ from '@/static/js/jquery'
//#endif
export default {
	data() {
		return {
			modalName:null,
			tableData:[],
			num:5,
			url:'',
			isShow: false,
			payAmount:'',
			numberobj:{}
		}
	},
	created() {
		this.getData()
		let obj = uni.getStorageSync('codeId')
		if(obj){
			this.payAmount = obj.payAmount
			this.isShow = true
		}else {
			this.payAmount = '9.9'
			this.isShow = false
		}
		this.getNumberData()
	},
	methods: {
		showModal(e) {
			this.modalName = e.currentTarget.dataset.target
		},
		hideModal(e) {
			this.modalName = null
		},
		getData () {
			this.$API.vipListApi('wx7fa156568cfba901').then((res) => {
				this.tableData = res.data
			})
		},
		getNumberData(){
			this.$API.userNumCountApi('wx7fa156568cfba901').then((res) => {
				this.numberobj = res.data
			})
		},
		aLink () {
			var appid = 'wx7fa156568cfba901'//$("#appid").val();
			var rootUrl = "https://xinci.tech";
			var param = "?totalFee="+this.payAmount+"&appId="+appid;
			var wUrl = "/bqb/pay";
			var redirect_url = rootUrl + wUrl + param;
			var wxUrl = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx7fa156568cfba901&redirect_uri="+encodeURIComponent(redirect_url)+"&response_type=code&scope=snsapi_base#wechat_redirect";
			window.location.href=wxUrl;
			// uni.navigateTo({
			// 	url: '/pages/webview/webview?url='+wxUrl
			// })
		}
	}
}
</script>

<style lang="scss" scoped>
.cu-modal{
	.bg-white{
		background-color: #0081FF;
	}
}
.vipbanner{
	text-align: center;
	.title{
		font-size: 45rpx;
		padding: 30rpx 0rpx;
	}
	.sctitle{
		font-size: 35rpx;
		color: #f47474;
	}
	.cu-card{
		display: flex;
		justify-content: center;
		.menu-avatar>.cu-item .content>uni-view:first-child{
			font-size: 40rpx
		}
	}
	.cu-avatar.lg{
		width: 150rpx;
		height: 150rpx;
	}
	.cu-list.menu-avatar > .cu-item > .cu-avatar{
		background-size: 150rpx 150rpx;
	}
	.cu-list.menu-avatar>.cu-item{
		height: 200rpx;
	}
	.cu-list.menu-avatar>.cu-item .content{
		margin-left: 80rpx;
	}
	.grid{
		margin-top: 80rpx;
		padding-bottom: 100rpx;
		img{
			height: 400rpx;
		}
	}
}
.carbox{
	padding-bottom: 150rpx;
	.cu-card.article>.cu-item .content{
		padding: 0rpx;
	}
	.cu-card.article>.cu-item .content .text-content{
		height: auto;
	}
	.cu-card.article>.cu-item .content>uni-image{
		width: 258rpx;
		height: 258rpx;
	}
	.cu-card.article>.cu-item {
		.title{
			padding: 0rpx;
			font-size: 38rpx;
		}
		.smalltitle{
			font-size: 28rpx;
			font-weight: bolder;
		}
	}
	.cu-card.article>.cu-item .info{
		font-size: 28rpx;
		padding-bottom: 30rpx;
		color: #999999;
	}
}
.padding{
	position: fixed;
	bottom: 80rpx;
	left: 0rpx;
	z-index: 1;
	width: 100%;
}
.cu-btn.block{
	background-color: #d7a860;
	color: #FFFFFF;
}
.action{
	display: flex;
	align-items: flex-end;
	font-size: 40rpx;
	color: #c07a18;
	font-weight: bold;
	.vnum{
		font-size: 50rpx;
		font-family: "Microsoft Yahei";
		font-style:italic;
		margin-right: 10rpx;
		margin-left: 10rpx;
	}
}
.carbox .cu-card.dynamic>.cu-item{
	background-color: #fff4e2;
	margin: 30rpx 20rpx;
	padding: 30rpx;
	border-radius: 20rpx;
	.text-content{
		font-size: 28rpx;
		color: #676564;
		padding:0rpx;
	}
	.image{
		display: flex;
		justify-content: center;
	}
	.image uni-image{
		border-radius: 15rpx;
		width: 100%;
	}
}
.privilege{
	padding-top: constant(safe-area-inset-top);
	padding-top: env(safe-area-inset-top);
}
</style>
